<script setup>
import { onMounted,ref } from 'vue';
import HomePanel from './HomePanel.vue'
import {getHotAPI} from '@/apis/home'
const hotList = ref([])
const getNew = async ()=>{
    const res = await getHotAPI()
    console.log(res)
    hotList.value = res.data.result
}
onMounted(()=>getNew())
</script>

<template>
  <div>
   <HomePanel title="热卖商品" subTitle="好物分享">
    <template v-slot:main>
        <ul>
            <li v-for="item in hotList" :key="item.id">
                <RouterLink :to="`/detail/${item.id}`"> <img v-lazy="item.picture" alt=""></RouterLink>
                <p class="title">{{ item.title }}</p>
                <p >{{ item.alt }}</p>
            </li>
        </ul>    
    </template>
   </HomePanel>
  </div>
</template>

<style scoped lang="scss">
ul{
    display: flex;
    li{
        margin-right: 10px;
        p{
            margin-top: 0;
            text-align: center;
            color: rgb(97, 95, 95);
        }
        .title{
            margin-top: 6px;
            font-size: 20px;
            font-weight: 700;
            color: black;
        }
    }
}
</style>